import React, { useState, useEffect } from 'react';
import { UploadOutlined } from '@ant-design/icons';
import { Button, message, Table, Upload, Row, Col, Form, Select } from 'antd';
import AppConfig from '../../config/config';
import {
    FileExcelOutlined
} from '@ant-design/icons';
import getFileNameFromPath from '../../util/getFileNameFromPath';
const DownloadDatFile = ({ outputFilePathList }) => {

    /*
   下载按钮
*/
    const handleDownload = (outputFilePath) => {
        // 发送文件名给后端并下载文件
        fetch(API_URL + '/importTable/download', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: outputFilePath
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('请求失败');
                }
                return response.blob();
            })
            .then(blob => {
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = getFileNameFromPath(outputFilePath); // 下载文件的名称
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            })
            .catch(error => message.error('文件下载失败:', error));
    };

    const columns = [
        {
            title: '文件',
            dataIndex: 'file',
            key: 'file',
            render: (file) => {
                return (<div>
                    <Button
                        key={file}
                        onClick={() => { handleDownload(file) }}
                    >
                        <FileExcelOutlined />{getFileNameFromPath(file)}
                    </Button>
                </div>)

            }
        },
    ];

    const dataSource = outputFilePathList.map((e, index) => {
        return {
            key: index,
            file: e
        }
    })
    return (
        <div>

            <Row>
                <Col>
                    <Table dataSource={dataSource} columns={columns} />
                </Col>
            </Row>

            <Row>
                <Col>
                    <Button type="primary"
                        onClick={() => {
                            outputFilePathList.forEach(e => {
                                handleDownload(e)
                            })
                        }}
                    >全部下载</Button>
                </Col>

            </Row>
        </div>
    )
};
export default DownloadDatFile;